import React, { FC } from 'react'
import { API } from 'App.d'
import { Menu } from 'antd'
import { useLocation } from 'react-router-dom';
import { Link } from 'react-router-dom'
const { SubMenu } = Menu

interface MenuProps {
  routes: Array<API.IRoute>
}

const MyMenu: FC<MenuProps> = (props) => {
  const { pathname } = useLocation()

  const renderSubMenu = (routes: MenuProps['routes']) => {
    return routes.map((route, index) => {
      if (route.routes) {
        return (
          <SubMenu title={route.name} key={index}>
            {renderSubMenu(route.routes)}
          </SubMenu>
        )
      }

      return (
        <Menu.Item key={route.path} >
          <Link to={route.path}>{route?.name}</Link>
        </Menu.Item>
      )
    })
  }

  return (
    <Menu selectedKeys={[pathname]} mode="inline">
      {renderSubMenu(props.routes)}
    </Menu>
  )
}

export default MyMenu